<script setup>
import {nextTick, reactive, ref} from "vue";
import {addProcessSetting} from "@/apis/zyj/ProcessSettings.js";
import {ElMessage} from "element-plus";
import {addProcess} from "@/apis/zyj/Process.js";

const props = defineProps({
  addDialog: Boolean
})

const isSwitch = ref(false)
const form = reactive({
  procedureCode: '',
  procedureName: '',
  description: '',
  isEnabled: '0',
  remark: ''
})
const ruleForm = reactive({...form})
const ruleFormRef = ref()
const rules = {
  procedureCode: [
    {
      required: true,
      message: '请输入工序编码',
      trigger: 'blur'
    }
  ],
  procedureName: [
    {
      required: true,
      message: '请输入工序名称',
      trigger: 'blur'
    }
  ],
  isEnabled: []
}
const emit = defineEmits(['close-dialog'])

// 打开弹窗时清空校验
const handleOpenCardDialog = () => {
  nextTick(() => {
    // 清空校验
    ruleFormRef.value.clearValidate()
  })
}
const handleClose = () => {
  Object.assign(form, ruleForm)
  isSwitch.value = false
  emit('close-dialog')
}
const handleConfirm = async () => {
  if (!ruleFormRef.value) return
  try {
    await ruleFormRef.value.validate()
    addProcess(form).then(req => {
      console.log(req)
      if (req === '成功') {
        ElMessage.success('添加成功')
        handleClose()
      } else {
        ElMessage.error('添加失败')
      }
    })
  } catch (error) {
    ElMessage.error('请填写完整信息')
  }
}
const switchCode = (value) => {
  let code = createID();
  if (value) {
    form.procedureCode = code
  } else {
    form.procedureCode = ''
  }
}

function createID() {
  let code = 'R';
  let date = new Date();
  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  let strDate = date.getDate();
  code = code + year + month + strDate + Math.floor(Math.random() * 10000);
  console.log(code)
  return code;
}
</script>

<template>
  <div class="dialog-class">
    <el-dialog title="添加工艺路线" v-model="props.addDialog" @close="handleClose" @open="handleOpenCardDialog"
               width="60%">
      <el-form :model="form" ref="ruleFormRef" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="工艺路线编码" prop="procedureCode">
              <el-input v-model="form.procedureCode" placeholder="请输入工艺路线编码"/>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-switch
                v-model="isSwitch"
                active-text="自动生成"
                @change="switchCode"
                style="width: 80px"/>
          </el-col>
          <el-col :span="8" style="padding-left: 20px">
            <el-form-item label="工艺路线名称" prop="procedureName">
              <el-input v-model="form.procedureName" placeholder="请输入工艺路线名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否启用" prop="isEnabled">
              <el-radio-group v-model="form.isEnabled">
                <el-radio label="true" value="0">是</el-radio>
                <el-radio label="false" value="1">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="工艺路线说明">
              <el-input
                  v-model="form.description"
                  type="textarea"
                  rows="3"
                  placeholder="请输入内容"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="备注">
              <el-input v-model="form.remark" type="textarea" rows="3" placeholder="请输入内容"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
         <span class="dialog-footer">
           <el-button @click="handleClose">取消</el-button>
           <el-button type="primary" @click="handleConfirm">确定</el-button>
         </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>

</style>